<template>
    <div class="app-container calendar-list-container">
        <div class="filter-container justify-between">
            <div>
                <el-switch v-model="multi" inactive-text="批量操作"></el-switch>
                <template v-if="multi">
                    <el-button size="mini" type="danger" @click="doRemove('','确定要删除吗？')">删除</el-button>
                </template>
            </div>
            <div>
                <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus"
                           @click="openEditor()">
                    新增短信
                </el-button>
            </div>
        </div>
        <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="给我一点时间"
                  border fit highlight-current-row style="width: 100%" @selection-change="onSelectionChange">
            <el-table-column v-if='multi' type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column align="left" width="150" label="模板名称">
                <template slot-scope="scope">
                    <span>{{scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" width="600" label="内容">
                <template slot-scope="scope">
                    <span>{{scope.row.content}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" width="120" label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==1" class="color-disable ">审核中</span>
                    <span v-if="scope.row.status==2" class="color-success ">已通过审核</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="操作" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button round v-if="scope.row.status=='2'" size="mini" type="primary"
                               @click="doOperate(scope.row.id,'offline','确定要禁用'+scope.row.name+'吗？')">设为已审核
                    </el-button>
                    <el-button round size="mini" type="danger"
                               @click="doRemove(scope.row.id,'确定要删除【'+scope.row.name+'】吗？')">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="onSizeChange" @current-change="onCurrentChange"
                           :current-page="listQuery.page" :page-sizes="[12,50,100,10000]" :page-size="listQuery.limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <el-dialog title="编辑短信模板" :visible.sync="dialogFormVisible">
            <el-form :rules="formRules" ref="dataForm" :model="bean" label-position="right" label-width="80px"
                     style='width: 400px; margin-left:50px;'>
                <template>
                    <el-form-item label="模板名称" prop="name">
                        <el-input v-model="bean.name" placeholder="输入模板名称"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model="bean.sort" placeholder="显示顺序，默认为 0"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" prop="point">
                        <el-input type="textarea" v-model="bean.content" placeholder="短信内容"></el-input>
                    </el-form-item>
                </template>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="saveBean" :loading="dealing">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
	import Vue from 'vue'
	import waves from '@/directive/waves' // 水波纹指令
	import API from '@/api'
	import Http from '@/http'
	import Store from '@/store'
	import Msg from '@/utils/msg'
	import Utils from '@/utils/common'
	import _ from 'underscore'
	import Qiniu from '@/utils/qiniu'

	export default {
		directives: {waves},
		data() {
			return {
				dealing: false,
				multi: false,
				list: [{name:'新品上市',content:'亲，我家又上新品啦！快来瞅瞅吧。微信小程序《华茵和美+》',status:'1'},
					{name:'新品上市',content:'亲，我家又上新品啦！快来瞅瞅吧。微信小程序《华茵和美+》',status:'2'}],
				total: null,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 12,
					keyword: '',
					status: ''
				},
				bean: {},
				multipleSelection: [],

				dialogTitle: '',
				dialogFormVisible: false,
				formRules: {
					name: [{required: true, message: '请填写模板名称', trigger: 'blur'}],
          content: [{required: true, message: '请填写短信内容', trigger: 'blur'}],
				}
			}
		},
		filters: {},
		components: {},
		created() {
//			this.loadList()
		},
		computed: {},
		methods: {
			doRemove(ids, tips) {
				if (!ids) {
					if (this.multipleSelection.length == 0) {
						Msg.error("请先选择");
						return false;
					} else {
						ids = _.pluck(this.multipleSelection, "id").join(",");
					}
				}
				Msg.confirm(tips, () => {
					Http.getModel(API.remove_product_nav, {ids: ids}, false).then((json) => {
						if (json.code == 0) {
							Msg.success(json.msg, () => {
								this.loadList()
							})
						} else {
							Msg.error(json.msg)
						}
					})
				})
			},
			doOperate(ids, cmd, tips) {
				var status = 0;
				var url = "";
				switch (cmd) {
					case 'disable':
						status = 2;
						url = API.disable_product_nav;
						break;
					case 'enable':
						status = 1;
						url = API.enable_product_nav;
						break;
					default:
						break;
				}
				if (status == 1 || status == 2) {
					if (!ids) {
						if (this.multipleSelection.length == 0) {
							Msg.error("请先选择");
							return false;
						} else {
							ids = _.pluck(this.multipleSelection, "id").join(",");
						}
					}
					Msg.confirm(tips, () => {
						Http.getModel(url, {ids: ids, status: status}, false).then((json) => {
							if (json.code == 0) {
								Msg.success(json.msg, () => {
									this.loadList()
								})
							} else {
								Msg.error(json.msg)
							}
						})
					})
				}
			},
			loadList() {
				this.listLoading = true
				Http.getModel(API.get_product_nav_list, this.listQuery, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.list = json.data.list
						this.total = parseInt(json.data.total)
						this.listLoading = false
					}
				})
			},
			loadBean(id) {
				Http.getModel(API.get_product_nav, {id: id}).then((json) => {
					if (json.code == 0) {
						let bean = json.data

						this.bean = bean
					}
				})
			},
			openEditor(id) {
				this.dialogFormVisible = true
				if (id) {
					this.loadBean(id)
				} else {
					this.bean = {
						sort: 0,
						img: ""
					}
				}
				this.$nextTick(() => {

					this.$refs['dataForm'].clearValidate()
				})
			},
			saveBean() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.dealing = true
						this.bean.pwd = Base64.encode(this.bean.login_pwd);
						Http.getModel(API.save_product_nav, this.bean, false).then((json) => {
							this.dealing = false
							if (json.code == 0) {
								this.dialogFormVisible = false
								Msg.success(json.msg, () => {
									this.loadList()
								})
							} else {
								Msg.error(json.msg)
							}

						})
					}
				})
			},
			/***   公用部分 start ***/
			onSelectionChange(val) {
				this.multipleSelection = val;
			},
			doSearch() {
				this.listQuery.page = 1
				this.loadList()
			},
			onSizeChange(val) {
				this.listQuery.limit = val
				this.loadList()
			},
			onCurrentChange(val) {
				this.listQuery.page = val
				this.loadList()
			},
			/***   公用部分 end ***/
		}
	}
</script>
